<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件</title>
		<style>
			div{
				border: 1px solid red;
				width: 300px;
				height: 200px;
				margin: 30px 30px;
			}
			p{
				border: 1px solid blue;
				width: 100px;
				height: 100px;
				margin: 30px 30px;
			}
		</style>
		<script>
			 //定义事件时传入event
			 //定义函数时，增加参数接收event
			 //函数的参数可以任意取名
			 function f2(e){
				 //通过事件对象可以获取事件发生时的具体位置
				 alert(e.clientX + "," + e.clientY);
			 }
			 function f3(e){
				 //获取事件源 元素节点
				 var obj = e.srcElement || e.target;
				 alert(obj.nodeName);
			 }
			 
		</script>
	</head>
	<body>
		<div>
			<input type="button" value="按钮1" id="btn1"/>
			<input type="button" value="按钮2" id="btn2" onclick="f2(event)"/>
		</div>
		
		<!-- 冒泡 -->
		<div onclick = "alert('lala')">
			人
			<p onclick = "alert('body')">
				身体
				<input type="button" value="头" onclick = "alert('head')"/>
			</p>
			
		</div>
		
		<!-- 冒泡 事件1-->
		<div onclick = "f3(event)">
			人
			<p>
				身体
				<input type="button" value="头"  />
			</p>
			
		</div>
		
	</body>
	 <script>
		var btn = document.getElementById("btn1");
		btn.ondblclick = function(){//双击事件
			alert("hello");
		}
	 </script>
</html>